<template>
	<view class="bg-white px6">
		<view class="h4"/>
		<u-tabs :list="filter.tabs(types)" :activeKey="formData.type" @change="(e:{index: number})=>formData.type=e.index" :activeStyle="{color:'#00b280'}" />
		<u-form class="mt2 px4" label-position="left" :model="formData" :rules="rules" ref="uForm">
			<u-form-item label="手机号码:" prop="account" label-width="140">
				<u-input v-model="formData.account" placeholder="请输入手机号" maxlength="11" type="tel" />
				<!-- #ifdef MP -->
				<template #right>
					<button size="mini" ref="getMobile" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">本机号</button>
				</template>
				<!-- #endif -->
			</u-form-item>
			<u-form-item v-if="formData.type==0" label="登录密码:" prop="password" label-width="140" :label-bottom="false">
				<u-input v-model="formData.password" placeholder="请输入密码" maxlength="16" type="password" :password="true" />
			</u-form-item>
      <button v-if="formData.type===0" class="mt6 mx4" @click="submit" :disabled="handing" :loading="handing" type="primary">登录</button>
      <button v-else class="mt6 mx4" @click="getcode" type="primary">获取手机验证码</button>
		</u-form>
		<view class="fjb py8 mx2 bt">
			<navigator url="/pages/index/public/signup" class="fc-green">注册</navigator>
			<navigator url="/pages/index/public/forget" class="c6">忘记密码?</navigator>
		</view>
		<u-modal :show="smsShow">
			<u-message-input mode="bottomLine" @finish="submit()" />
		</u-modal>
		<!-- #ifdef APP-PLUS -->
		<view class="fjc p4">
			<button type="info" ref="getMobile" open-type="getPhoneNumber" @getphonenumber="bindPhone">本机号一键绑定</button>
		</view>
		<!-- #endif -->
		<u-modal :show="smsShow" title="验证码" :async-close="true" :show-cancel-button="true" :show-confirm-button="false" :cancel-style="{'color':'#00b280'}">
			<view class="py8">
				<u-message-input :value="formData.smscode" mode="bottomLine" @finish="finish" active-color="#00b280"/>
			</view>
			<view v-if="seconds > 0" class="fjc  pb6 c9">
				请于<text>{{seconds}}</text>秒后重新发送
			</view>
			<view v-if="seconds==0" @click="getcode" class="pb6 fjc">重新获取验证码</view>
		</u-modal>
	</view>
</template>
<script lang="ts">
import {mapActions} from 'pinia'
import util from '@/utils/util'
import {page,form} from '@/mixins'
import {userStore} from '@/store'
// import CryptoJS from "crypto-js"

export default {
	mixins: [page,form],
	data() {
		return {
			meta:{title:'登录'},
			formData: { 
				type: 0 as number, 
				account: '' as string,
				password: '' as string, 
				smscode: '' as string
			},
			rules: {
				account: [{
					type: 'number',
					required: true,
					len: 11,
					message: '请输入正确的手机号',
					trigger: ['blur']
				}],
				password: [{
					type: 'string',
					required: true,
					min: 6, max: 16,
					message: '请输入密码,6-16位字符',
					trigger: ['blur']
				}],
				smscode: [{
					type: 'string',
					required: true,
					len: 4,
					message: '请输入4位短信验证码',
					trigger: ['blur']
				}]
			},
			needLogin: false as boolean,
			smsShow: false as boolean,
			seconds: 60,
			types: ['账号密码', '手机短信'],
			formPath: 'login'
		}
	},
	methods: {
		...mapActions(userStore, ['login']),
		getPhoneNumber(e: {detail: {errMsg: string}}) {
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				// console.log('您拒绝提供手机号');
			} else {
				uni.$u.http.post('wemini/decrypt', e.detail).then((data: {purePhoneNumber: string}) => {
					this.formData.account = data.purePhoneNumber
				}).catch(()=>{})
			}
		},
		getcode(){
			if(!this.formData.account){
				return this.$u.toast('请输入的手机号')
			}
			else if(!this.$u.test.account(this.formData.account)){
				return this.$u.toast('请输入正确的手机号')
			}
			//uni.$u.http.post('sms/auth', {account:this.formData.account}).then(res => {
			this.smsShow=true
			const interval = setInterval(()=>{
				if(this.seconds <= 0){
					clearInterval(interval)
				} else {
					this.seconds -= 1
				}
			}, 1000)
			this.seconds=60
			//}).catch(()=>{})
		},
		bindPhone(){},
		finish(e){
			this.formData.smscode=e
			this.save()
		},
		save() {
			this.handing = true
			uni.$u.http.post(this.formPath, this.formData).then((res: object) => {
				this.handing = false
				if(res){
					this.smsShow=false
					this.login(res)
					util.back('my')
				}
			}).catch(res=>{
				this.handing = false
				this.formData.smscode=''
			})
		}
	}
}
</script>
